import React from 'react'
import './TodoMain.css'
export default function TodoMain(props) {
  let {todos,checkTodo,remoTodo} = props

  let remove = (id)=>{
    return ()=>{
      if(!window.confirm('确定删除吗')) return
      remoTodo(id)
    }
  }
  return (
    <ul className="todo-main">
      {
        todos.map(item => {
          return <li key={item.id}>
          <label>
            <input type="checkbox" checked={item.done} onChange={(e)=>{
              checkTodo(item.id,e.target.checked)
            }}/>
            <span className={item.done?'done':''}>{item.title}</span>
          </label>
          <button className="btn btn-danger" onClick={remove(item.id)}>删除</button>
        </li>
        })
      }
      {todos.length === 0 && <li style={{padding:10 ,textAlign:'center'}}>暂无数据</li>}
      </ul>
  )
}
